<template>
  <div class="y-nav">
    <el-form ref="ruleForm" :rules="rules" :model="ruleForm">
      <div class="l-addrygl">
        <!-- <h2>基本信息</h2> -->
        <!-- 返回 -->
        <div class="l-addrygl-1">
          <div></div>
          <div class="l-addrygl-back" @click="back()">返回</div>
          <div class="head-span">新增设备</div>
        </div>
        <!-- 单位信息 -->

        <div class="l-addrygl-2">
          <div class="l-addrygl-2-1">新增塔吊设备信息</div>

          <!-- input框 -->
          <div class="l-addrygl-2-2">
            <!-- 第一行 -->
            <el-row>
              <el-col :span="6">
                <el-form-item label="设备名称：" prop="equipment_name">
                  <el-input v-model="ruleForm.equipment_name" class="padding"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="设备编号：" prop="equipment_code">
                  <el-input v-model="ruleForm.equipment_code" class="padding"></el-input>
                </el-form-item>
              </el-col>
               <el-col :span="6">
                <el-form-item label="操作人员：" prop="people_id">
                  <el-input v-model="ruleForm.people_id" class="padding"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="ip地址：" prop="equipment_ip">
                  <el-input v-model="ruleForm.equipment_ip" class="padding"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 第二行 -->
            <el-row>
              <el-col :span="6">
                <el-form-item label="品牌名称：" prop="equipment_brand">
                  <el-input v-model="ruleForm.equipment_brand" class="padding"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="安装时间：" prop="equipment_install">
                  <el-date-picker
                    v-model="ruleForm.equipment_install"
                    type="date"
                    placeholder="选择日期"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="安装位置：" prop="equipment_addr">
                  <el-input v-model="ruleForm.equipment_addr" class="padding"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item prop="equipment_status">
                  <div>设备状态：</div>
                  <el-select
                    v-model="ruleForm.equipment_status"
                    placeholder="请选择"
                    readonly="true"
                  >
                    <el-option
                      v-for="item in linput1"
                      :key="item.index"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 第三行 -->
            <el-row>
              <el-col :span="6">
                <el-form-item label="开机时间：" prop="equipment_start">
                  <el-date-picker
                    v-model="ruleForm.equipment_start"
                    type="date"
                    placeholder="选择日期"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="项目平面图位置：" prop="equipment_xy">
                  <el-input v-model="ruleForm.equipment_xy" class="padding"></el-input>
                </el-form-item>
              </el-col>
             
            </el-row>
          </div>
        </div>
      </div>
      <!-- 详细信息 -->
      <el-form ref="ruleForm" :rules="rules" :model="ruleForm">
        <div class="l-addrygl">
          <div class="l-addrygl-5">
            <div class="l-addrygl-2-1">设备详细信息</div>

            <!-- input框 -->
            <div class="l-addrygl-2-2">
              <!-- 第一输入框行 -->
              <el-row>
                <el-col :span="6">
                  <el-form-item
                    label="塔身高度:"
                    prop="buildTower.tower_height"
                  >
                    <el-input
                    class="padding"
                      v-model="ruleForm.buildTower.tower_height"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item
                    label="垂直角度："
                    prop="buildTower.tower_vertical"
                  >
                    <el-input
                    class="padding"
                      v-model="ruleForm.buildTower.tower_vertical"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="力矩比:" prop="buildTower.tower_torque">
                    <el-input
                    class="padding"
                      v-model="ruleForm.buildTower.tower_torque"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="风速预警:" prop="buildTower.tower_wind">
                    <el-input
                    class="padding"
                      v-model="ruleForm.buildTower.tower_wind"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- 第二输入框行 -->
              <el-row>
                <el-col :span="6">
                  <el-form-item label="前臂:" prop="buildTower.tower_forearm">
                    <el-input
                    class="padding"
                      v-model="ruleForm.buildTower.tower_forearm"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item
                    label="后臂："
                    prop="buildTower.tower_afterwrap"
                  >
                    <el-input
                    class="padding"
                      v-model="ruleForm.buildTower.tower_afterwrap"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="回转:" prop="buildTower.tower_turn">
                    <el-input
                    class="padding"
                      v-model="ruleForm.buildTower.tower_turn"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="吊重:" prop="buildTower.tower_hoisting">
                    <el-input
                    class="padding"
                      v-model="ruleForm.buildTower.tower_hoisting"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- 第三输入框行 -->
              <el-row>
                <el-col :span="6">
                  <el-form-item label="小车幅度	:" prop="buildTower.tower_range">
                    <el-input
                    class="padding"
                      v-model="ruleForm.buildTower.tower_range"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item
                    label="水平斜角："
                    prop="buildTower.tower_mitre"
                  >
                    <el-input
                    class="padding"
                      v-model="ruleForm.buildTower.tower_mitre"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="吊钩高度:" prop="buildTower.tower_hook">
                    <el-input
                    class="padding"
                      v-model="ruleForm.buildTower.tower_hook"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item
                    label="监控画面路径:"
                    prop="buildTower.tower_url"
                  >
                    <el-input
                    class="padding"
                      v-model="ruleForm.buildTower.tower_url"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <div class="y-btn">
                <el-form-item>
                  <el-button class="btn-1" type="primary" @click="submitForm('ruleForm')"
                    >提交</el-button
                  >
                  <el-button class="btn-2" @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
              </div>
            </div>
          </div>
        </div>
      </el-form>
    </el-form>
  </div>
</template>
<script>
import http from "../api";
// import axios from "axios";
export default {
  data() {
    return {
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {}, //模态框input value值
      formLabelWidth: "120px",
      //设备状态
      linput1: [
        {
          value: 0,
          label: "开机",
        },
        {
          value: 1,
          label: "关闭",
        },
      ],
      // 设备类型id：
      options1: [
        {
          value: 1,
          label: "门禁设备",
        },
        {
          value: 2,
          label: "塔吊设备",
        },
        {
          value: 3,
          label: "监控设备",
        },
        {
          value: 4,
          label: "电表设备",
        },
        {
          value: 5,
          label: "环境监测设备",
        },
        {
          value: 6,
          label: "车辆监测设备",
        },
        {
          value: 7,
          label: "基坑监测设备",
        },
      ],
      currentRow: null,

      ruleForm: {
        equipment_name: "", //设备名称
        equipment_code: "", //设备编号
        equipment_id: "", //设备id
        equipment_type_id:"2", //设备类型
        equipment_ip: "", //ip地址
        equipment_brand: "", //品牌名称
        equipment_install: "", //安装时间
        equipment_addr: "", //安装位置
        equipment_status: "", //设备状态
        equipment_start: "", //开机时间
        equipment_xy: "", //平面图位置
        people_id: "", //操作人员
        // 新增信息
        buildTower: {
          tower_height: "", //塔身高度
          tower_vertical: "", //垂直角度
          tower_torque: "", //力矩比
          tower_wind: "", //风速
          tower_forearm: "", //前臂
          tower_afterwrap: "", //后臂
          tower_turn: "", //回转
          tower_hoisting: "", //吊重
          tower_range: "", //小车幅度
          tower_mitre: "", //水平斜角
          tower_hook: "", //吊钩高度
          tower_url: "", //监控画面路径
        },
      },

      // 表单验证规则
      rules: {
        equipment_name: [
          { required: true, message: "请输入设备名称", trigger: "blur" },
        ],
        equipment_code: [
          { required: true, message: "请输入设备编号", trigger: "blur" },
        ],
        equipment_ip: [
          { required: true, message: "请输入ip地址", trigger: "blur" },
        ],
        equipment_type_id: [
          { required: true, message: "请输入设备类型", trigger: "blur" },
        ],
        equipment_brand: [
          { required: true, message: "请输入品牌名称", trigger: "blur" },
        ],
        equipment_install: [
          { required: true, message: "请选择安装时间", trigger: "change" },
        ],
         equipment_addr: [
          { required: true, message: "请输入安装位置", trigger: "blur" },
        ],
        equipment_status: [
          { required: true, message: "请选择设备状态", trigger: "change" },
        ],
        equipment_start: [
          { required: true, message: "请选择开机时间", trigger: "change" },
        ],
        equipment_xy: [
          { required: true, message: "请输入项目平面图位置", trigger: "change" },
        ],
      

        
        // 详细信息
         'buildTower.tower_height': [
          { required: true, message: "请输入", trigger: "change" },
        ],
         'buildTower.tower_vertical': [
          { required: true, message: "请输入", trigger: "change" },
        ],
         'buildTower.tower_torque': [
          { required: true, message: "请输入", trigger: "change" },
        ],
           'buildTower.tower_wind': [
          { required: true, message: "请输入", trigger: "change" },
        ],
         'buildTower.tower_forearm': [
          { required: true, message: "请输入", trigger: "change" },
        ],
         'buildTower.tower_turn': [
          { required: true, message: "请输入", trigger: "change" },
        ],
          'buildTower.tower_hoisting': [
          { required: true, message: "请输入", trigger: "change" },
        ],
       
           'buildTower.tower_range': [
          { required: true, message: "请输入", trigger: "change" },
        ],
          'buildTower.tower_mitre': [
          { required: true, message: "请输入", trigger: "change" },
        ],
          'buildTower.tower_hook': [
          { required: true, message: "请输入", trigger: "change" },
        ],
            'buildTower.tower_url': [
          { required: true, message: "请输入", trigger: "change" },
        ],
           'buildTower.tower_afterwrap': [
          { required: true, message: "请输入", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    // 返回
    back() {
      this.$router.push({
        name: "塔吊设备",
      });
    },
      //重置按钮
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    // 提交
    submitForm(ruleForm) {
      console.log(this.ruleForm);
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          http.Newtower(this.ruleForm).then((res) => {
            console.log("新增", res);
          });
         
              alert("成功");
          this.$router.push({
            name: "塔吊设备",
          });
        } else {
          return false;
        }
      });
    },
  },
  mounted() {},
};
</script>
<style scoped>
.padding >>> .el-input__inner {
  width: 178px;
  height: 30px;
  padding-left: 5px !important;
}
.el-select >>> .el-input__inner {
  width: 178px;
  height: 30px;
  padding-left: 5px;
  /* margin-left: 5px; */
}

/* .el-input >>> .el-input__inner {
  width: 239px !important;
  height: 30px;
}
.el-select >>> .el-input__inner {
  width: 239px !important;
  height: 30px;
} */

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 239px;
}
.el-col {
  height: 90px;
}

.input-span {
  margin-right: 5px;
}
.add-input {
  width: 300px;
  margin-top: 15px;
  display: inline-block;
  margin-left: 10px;
}
/*  最外层 */
.y-nav {
  width: 100%;
  height: 657px;
  overflow-y: scroll;
}
/* 最二层高度 */
.l-addrygl {
  margin-top: 20px;
  margin-left: 20px;
  /* width: 1200px; */
  height: 430px;
  background: #f1f1f1;
}
/*最二层高度里 第一层新增高度 */
.l-addrygl-2 {
  width: 100%;
  height: 350px;
  background: white;
  margin-top: 20px;
  padding-left: 20px;
 
}
.l-addrygl-5 {
  width: 100%;
  height: 420px;
  background: white;
  margin-top: 20px;
  padding-left: 20px;
  position: relative;
}
.l-addrygl-1 {
  /* position: fixed;
  top: 0; */
  font-size: 17px;
  color: #787878;
  width: 100%;
  height: 61px;
  background: white;
  display: flex;
  /* position: relative;  */
  justify-content: left;
  align-items: center;
}
.l-addrygl-back {
  cursor: pointer;
  margin-left: 10px;
}
.head-span {
  font-size: 17px;
  color: #222;
  font-weight: 700;
  margin-left: 20px;
}

.l-addrygl-2-1 {
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  border-bottom: 1px solid #f2f2f2;
  font-size: 17px;
  color: #222;
  font-weight: 700;
}
.l-addrygl-3-1 {
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  border: 1px solid #f2f2f2;
  font-size: 17px;
  color: #222;
  font-weight: 700;
}
.l-addrygl-3-2 {
  margin-left: 70px;
}
.l-addrygl-4-1 {
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  border: 1px solid #f2f2f2;
  font-size: 17px;
  color: #222;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
}
.l-addrygl-4-1-right {
  color: blue;
  margin-right: 20px;
  cursor: pointer;
}
.dang {
  height: 40px;
  margin-top: 40px;
  /* margin-top: 40px; */
}

.l-addrygl-3 {
  width: 100%;
  height: 282px;
  padding-left: 20px;
  background: white;
  margin-top: 20px;
}
.l-addrygl-4 {
  width: 100%;
  height: 202px;
  padding-left: 20px;
  background: white;
  margin-top: 20px;
}
.l-tijiao {
  width: 170px;
  height: 40px;
  position: absolute;
  right: 180px;
  top: 440px;
}
.y-btn{
  position: absolute;
  top: 350px;
  right: 50px;
}
/* 按钮 */
.btn-1 {
  width: 80px;
  height: 30px;
  line-height: 6px;
}
.btn-2 {
  width: 80px;
  height: 30px;
  line-height: 6px;
}
</style>